<template>
    <div>
        <div style="width: 100%; height: 300px" ref="chartRef" />
    </div>
</template>
<script lang="ts">
import { isNotEmpty } from '@/utils/is';
import { useEcharts } from '@/hooks/common/useEcharts';
import { defineComponent, ref, unref, watch } from 'vue';
export default defineComponent({
    name: 'HDotChart',
    props: {
        option: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const chartRef = ref<any>();
        const defaultOption: any = ref({
            title: {
                text: '', //主标题
                textStyle: {
                    fontSize: '16px',
                    color: '#172B4D',
                    fontWeight: 'normal'
                },
                bottom: 0,
                x: 'center'
            },
            color: null,
            grid: {
                bottom: '30%'
            },
            legend: {
                x: 'right',
                data: [],
                padding: [0, 0, 0, 200],
                itemWidth: 14,
                selectedMode: false
            },
            xAxis: {
                type: 'category',
                data: [],
                nameLocation: 'end',
                axisLabel: {
                    //坐标轴刻度标签的相关设置。
                    interval: 0,
                    rotate: '45'
                }
            },
            yAxis: {
                name: '同质化程度',
                nameLocation: 'center', // 垂直居中
                nameRotate: 90, // 旋转90度
                nameGap: 40, // 距离y轴距离
                min: 0,
                max: 10,
                type: 'value',
                scale: false,
                interval: 2.5, //每个间隔2.5个
                axisLabel: {
                    formatter(val: number) {
                        if (val === 0) {
                            return '';
                        } else if (val <= 2.5) {
                            return '低';
                        } else if (val <= 5) {
                            return '偏低';
                        } else if (val <= 7.5) {
                            return '偏高';
                        } else if (val <= 10) {
                            return '高';
                        }
                    }
                }
            },
            series: []
        });
        const { setOptions } = useEcharts(chartRef, defaultOption);
        const updateChart = () => {
            // 先清空
            defaultOption.value.series = [];
            const { typeArr, xArr, data, title } = props.option;
            defaultOption.value.legend.data = [...typeArr];
            defaultOption.value.xAxis.data = xArr;
            defaultOption.value.title = {
                ...defaultOption.value.title,
                ...title
            };
            typeArr.forEach((item, index) => {
                defaultOption.value.series.push({
                    symbolSize: 20, // 散点大小
                    type: 'scatter',
                    name: data[index].name,
                    data: data[index].list.map((item: any) => item.homogenize)
                });
            });
            setTimeout(() => {
                setOptions(unref(defaultOption));
            });
        };
        watch(
            () => props.option,
            (n) => {
                if (isNotEmpty(n)) {
                    updateChart();
                }
            },
            { immediate: true, deep: true }
        );
        return {
            chartRef
        };
    }
});
</script>

